<template>
  <div class="profile">
    <div class="profile-header">
      <h1 class="profile-name">{{ name }}</h1>
    </div>
    <div class="profile-body">
      <el-tabs type="border-card">
        <el-tab-pane label="基本信息">
          <el-row>
            <el-col :span="8">
              <el-form :model="formData" label-width="120px">
                <el-form-item label="姓名">
                  <el-tag type="info">{{formData.name}}</el-tag>
                </el-form-item>
                <el-form-item label="电话号码">
                  <el-tag type="info">{{formData.phone}}</el-tag>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input placeholder="*********" disabled></el-input>
                  <el-button type="danger" @click="handleAdd">修改密码</el-button>
                </el-form-item>
                <el-form-item label="地址">
                  <el-tag type="info">{{formData.address}}</el-tag>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="工作">
          <el-table :data="workList" border>
            <el-table-column prop="date1" label="入职时间"></el-table-column>
            <el-table-column prop="date2" label="离职时间"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="30%">
      <el-form label-width="80px" size="small">
        <el-form-item label="原始密码">
          <el-input v-model="oldPassword" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="修改密码">
          <el-input v-model="password" autocomplete="off" type="password" :disabled= !passwordEnabled1></el-input>
        </el-form-item>
        <el-form-item label="重复密码">
          <el-input v-model="confirmPassword" autocomplete="off" type="password" :disabled= !passwordEnabled2></el-input>
          <br>
          <p v-if="passwordMismatch && confirmPassword !== ''">两次密码不一致</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '张三',
      formData: {
        name: '张三',
        phone: '13812345678',
        address: '北京市海淀区'
      },
      workList: [
        {
          date1: '2016-07-01 ',
          date2: '未离职'
        }
      ],
      form: {},
      dialogFormVisible: false,
      oldPassword:"",
      password: "",
      confirmPassword: "",
      passwordMismatch: false,
      passwordEnabled1: false,
      passwordEnabled2: false,
    }
  },
  watch: {
    oldPassword: function(newVal, oldVal) { 
      if (newVal !== "") {
         this.passwordEnabled1 = true; 
        }
        else { this.passwordEnabled1 = false; }   
    },
    password: function(newVal, oldVal) {
      if (newVal !== "" ){
        this.passwordEnabled2 = true;
      }
      else { this.passwordEnabled2 = false; }
      if (newVal !== this.confirmPassword) {
        this.passwordMismatch = true;
      } else {
        this.passwordMismatch = false;
      }
    },
    confirmPassword: function(newVal, oldVal) {
      if (newVal !== this.password) {
        this.passwordMismatch = true;
      } else {
        this.passwordMismatch = false;
      }
    }
  },
  methods: {
    handleAdd() {
      this.dialogFormVisible = true;
      this.form = {};
      this.passwordEnabled = false;
    },
    save() {
      if (this.password !== this.confirmPassword) {
        this.passwordMismatch = true;
      } else {
        // 保存密码的逻辑
        this.dialogFormVisible = false;
        this.passwordEnabled = true;
      }
      if(this.passwordEnabled2 !== true && this.passwordMismatch !==true){
        alert("密码有误");
      }
    }
  }
}
</script>

<style scoped>
.profile {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.profile-header {
  text-align: center;
}

.profile-name {
  margin-top: 30px;
  font-family: '华文行楷';
  color: #909399;
  font-size: 50px;
}

.profile-bio {
  margin-top: 10px;
  color: #999;
}

.profile-body {
  margin-top: 20px;
}

.profile-image {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-image img {
  max-width: 100%;
  max-height: 500px;
}

.el-tabs__header {
  margin-bottom: 20px;
}

.el-table__header-wrapper th {
  background-color: #f5f7fa;
}

.el-table--border {
  border: none;
}
</style>
